<script lang="ts" setup>
import MoreButton from '@/layouts/components/Tabs/MoreButton.vue'
import {computed, onMounted, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {type TabsPaneContext} from 'element-plus'
import Sortable from 'sortablejs'
import useRouteStore from '@/store/route.ts'
import useThemeStore from '@/store/theme.ts'

const route = useRoute()
const router = useRouter()
const routeStore = useRouteStore()
const themeStore = useThemeStore()
const tabsMenuValue = ref(route.fullPath)
const tabsMenuList = computed(() => routeStore.tabsMenuList)

onMounted(() => {
	tabsDrop()
	initTabs()
})

const tabsDrop = () => {
	const target: any = document.querySelector('.el-tabs__nav')
	Sortable.create(target, {
		draggable: '.el-tabs__item',
		animation: 300,
		onEnd(val: any): void {
			const tabsList = [...routeStore.tabsMenuList]
			const currRow = tabsList.splice(val.oldIndex, 1)[0]
			tabsList.splice(val.newIndex, 0, currRow)
			routeStore.setTabs(tabsList)
		}
	})
}

watch(
	() => route.fullPath,
	() => {
		if (route.meta.isFull) return
		tabsMenuValue.value = route.fullPath.split('?')[0]
		const tabsParams = {
			icon: route.meta.icon as string,
			title: route.meta.title as string,
			path: route.fullPath.split('?')[0],
			params: route.fullPath.split('?')[1] || '',
			name: route.name as string,
			close: !route.meta.isAffix
		}
		routeStore.addTabs(tabsParams)
		route.meta.noCache && routeStore.addKeepAliveName(route.name as string)
	},
	{
		immediate: true
	}
)

// 初始化需要固定的标签
const initTabs = () => {
	routeStore.flatMenuListGet.forEach((item: any) => {
		if (item.meta.isAffix && !item.hidden && !item.meta.isFull) {
			const tabsParams = {
				icon: item.meta.icon,
				title: item.meta.title,
				path: item.path,
				name: item.name,
				close: !item.meta.isAffix
			}
			routeStore.addTabs(tabsParams)
		}
	})
}

const tabClick = (tabItem: TabsPaneContext) => {
	const fullPath = tabItem.props.name as string
	let obj: any = tabsMenuList.value.find(item => item.path === fullPath)
	router.push(obj.params ? fullPath + '?' + obj.params : fullPath)
}

const tabRemove = (fullPath: string) => {
	const name = routeStore.tabsMenuList.filter((item: any) => item.path === fullPath)[0].name || ''
	routeStore.removeKeepAliveName(name)
	routeStore.removeTabs(fullPath, fullPath === route.fullPath)
	let obj: any = routeStore.tabsMenuList[routeStore.tabsMenuList.length - 1]
	router.push(obj.params ? obj.path + '?' + obj.params : obj.path)
}
</script>

<template>
	<div class="tabs-box">
		<div class="tabs-menu">
			<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
				<el-tab-pane
					v-for="item in tabsMenuList"
					:key="item.path"
					:closable="tabsMenuList.length > 1 && item.close"
					:label="item.title"
					:name="item.path"
				>
					<template #label>
						<base-icon v-if="item.icon && themeStore.tabsIcon" :icon="item.icon" class="tabs-icon"/>
						{{ item.title }}
					</template>
				</el-tab-pane>
			</el-tabs>
			<MoreButton/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
